<template>
  <div class="tableList">
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="500"
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="55" />
      <!-- 循环渲染table列表 -->
      <template v-for="(item, index) in tableHeaders" :key="index">
        <el-table-column :fixed="item.isfixed" :prop="item.prop" :label="item.label" :width="300" />
      </template>

      <el-table-column v-if="tableBtn.length != 0" fixed="right" label="操作">
        <template #default="scope">
          <el-button
            v-for="(item, index) in tableBtn"
            :key="index"
            :type="item.type"
            :size="item.size"
            v-show="item.show"
            :style="{
              color: item.fontColor,
            }"
            @click.prevent="tabCLick(scope.row, item.flag || index)"
          >
            {{ item.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="pagination">
      <div>总计：8条/页</div>
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="100"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true,
      default: (val1, val2) => {
        return [
          {
            label: 'name1',
            prop: 'date',
            isfixed: true,
          },
        ];
      },
    },
    tableHeaders: {
      type: Array,
      required: true,
      default: (val1, val2) => {
        return [
          {
            date: '111',
            date2: '211',
            date3: '311',
            date4: '411',
            id: 1,
            date5: '511',
            date6: '611',
            date7: '711',
            date8: '811',
            date9: '911',
          },
        ];
      },
    },
    tableBtn: {
      type: Array,
      default: (val1, val2) => {
        return [
          {
            label: '编辑',
            type: 'primary',
            show: true,
            fontColor: '',
            size: 'small',
            flag: '',
          },
        ];
      },
    },
  },
  data() {
    return {
      currentPage: '',
    };
  },
  methods: {
    tabCLick(val, val1) {
      // tableBtnClc 点击操作按钮，通过传入的flag值去区分是什么按钮
      this.$emit('tableBtnClc', val, val1);
    },
    // 单个选中
    select(val, val1) {
      console.log(val);
      this.$emit('select', val, val1);
    },
    // 选中全部
    selectAll(val, val1) {
      this.$emit('selectAll', val, val1);
    },
    // 每页条数修改
    handleSizeChange(val, val1) {},
    // 当前页
    handleCurrentChange(val, val1) {},
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
